<template>
	<div>
		<!----------------最外层包裹DIV ----------------------->
		<div class="journey_Content">
			<div class="Content">
				<div class="contentwrapper">
					<a href="/" title="首页" target="_blank">首页</a>
					&nbsp;&gt;
					<span>行程</span>
				</div>
				<div class="page-title">
					<h2 class="title">行程</h2>
				</div>
				<!-- <p>------------------------------</p> -->
				<div class="main">
					<div class="mainLeft">
						<div id="JS-tabs" class="tabs cfb-clearfix">
							<a
								href="javascript:;"
								@click="current = 1"
								:class="current == 1 ? 'current' : ''"
							>
								国内
							</a>
							<a
								id="JS-tab-abroad"
								href="javascript:;"
								@click="current = 2"
								:class="current == 2 ? 'current' : ''"
							>
								国外
							</a>
						</div>
						<div id="JS-cont">
							<div class="cont" v-if="current == 1">
								<a href="javascript:;"><span>安徽</span></a>
								<a href="javascript:;">
									<span>澳门</span>
									<i class="ico-hot"></i>
								</a>
								<a href="javascript:;">
									<span>北京</span>
									<i class="ico-hot"></i>
								</a>
								<a href="javascript:;"><span>重庆</span></a>
								<a href="javascript:;"><span>福建</span></a>
								<a href="javascript:;"><span>甘肃</span></a>
								<a href="javascript:;"><span>广东</span></a>
								<a href="javascript:;"><span>广西</span></a>
								<a href="javascript:;"><span>贵州</span></a>
								<a href="javascript:;"><span>海南</span></a>
								<a href="javascript:;"><span>河北</span></a>
								<a href="javascript:;"><span>黑龙江</span></a>
								<a href="javascript:;"><span>河南</span></a>
								<a href="javascript:;"><span>湖北</span></a>
								<a href="javascript:;"><span>湖南</span></a>
								<a href="javascript:;">
									<span>江苏</span>
									<i class="ico-hot"></i>
								</a>
								<a href="javascript:;"><span>江西</span></a>
								<a href="javascript:;"><span>吉林</span></a>
								<a href="javascript:;"><span>辽宁</span></a>
								<a href="javascript:;"><span>内蒙古</span></a>
								<a href="javascript:;"><span>宁夏</span></a>
								<a href="javascript:;"><span>青海</span></a>
								<a href="javascript:;"><span>山东</span></a>
								<a href="javascript:;">
									<span>上海</span>
									<i class="ico-hot"></i>
								</a>
								<a href="javascript:;"><span>山西</span></a>
								<a href="javascript:;"><span>陕西</span></a>
								<a href="javascript:;"><span>四川</span></a>
								<a href="javascript:;">
									<span>台湾</span>
									<i class="ico-hot"></i>
								</a>
								<a href="javascript:;"><span>天津</span></a>
								<a href="javascript:;">
									<span>香港</span>
									<i class="ico-hot"></i>
								</a>
								<a href="javascript:;"><span>西藏</span></a>
								<a href="javascript:;"><span>新疆</span></a>
								<a href="javascript:;">
									<span>云南</span>
									<i class="ico-hot"></i>
								</a>
								<a href="javascript:;">
									<span>浙江</span>
									<i class="ico-hot"></i>
								</a>
							</div>
							<div class="cont"></div>
						</div>

						<div class="cont" v-if="current == 2">
							<a href="javascript:;"><span>阿根廷</span></a>
							<a href="javascript:;"><span>爱尔兰</span></a>
							<a href="javascript:;"><span>阿联酋</span></a>
							<a href="javascript:;">
								<span>澳大利亚</span>
								<i class="ico-hot"></i>
							</a>
							<a href="javascript:;"><span>奥地利</span></a>
							<a href="javascript:;"><span>巴巴多斯</span></a>
							<a href="javascript:;"><span>巴哈马</span></a>
							<a href="javascript:;"><span>巴西</span></a>
							<a href="javascript:;"><span>比利时</span></a>
							<a href="javascript:;"><span>波黑</span></a>
							<a href="javascript:;"><span>丹麦</span></a>
							<a href="javascript:;"><span>德国</span></a>
							<a href="javascript:;"><span>厄瓜多尔</span></a>
							<a href="javascript:;"><span>俄罗斯</span></a>
							<a href="javascript:;">
								<span>法国</span>
								<i class="ico-hot"></i>
							</a>
							<a href="javascript:;"><span>斐济</span></a>
							<a href="javascript:;"><span>菲律宾</span></a>
							<a href="javascript:;"><span>芬兰</span></a>
							<a href="javascript:;"><span>格鲁吉亚</span></a>
							<a href="javascript:;">
								<span>韩国</span>
								<i class="ico-hot"></i>
							</a>
							<a href="javascript:;"><span>荷兰</span></a>
							<a href="javascript:;"><span>加拿大</span></a>
							<a href="javascript:;"><span>柬埔寨</span></a>
							<a href="javascript:;"><span>捷克</span></a>
							<a href="javascript:;"><span>卡塔尔</span></a>
							<a href="javascript:;"><span>卢森堡</span></a>
							<a href="javascript:;"><span>马尔代夫</span></a>
							<a href="javascript:;"><span>马来西亚</span></a>
							<a href="javascript:;">
								<span>美国</span>
								<i class="ico-hot"></i>
							</a>
							<a href="javascript:;"><span>缅甸</span></a>
							<a href="javascript:;"><span>摩纳哥</span></a>
							<a href="javascript:;"><span>尼泊尔</span></a>

							<a href="javascript:;"><span>挪威</span></a>

							<a href="javascript:;"><span>葡萄牙</span></a>

							<a href="javascript:;">
								<span>日本</span>
								<i class="ico-hot"></i>
							</a>
							<a href="javascript:;"><span>瑞典</span></a>
							<a href="javascript:;">
								<span>瑞士</span>
								<i class="ico-hot"></i>
							</a>
							<a href="javascript:;"><span>塞尔维亚</span></a>
							<a href="javascript:;"><span>斯里兰卡</span></a>
							<a href="javascript:;">
								<span>泰国</span>
								<i class="ico-hot"></i>
							</a>
							<a href="javascript:;"><span>土耳其</span></a>
							<a href="javascript:;"><span>西班牙</span></a>
							<a href="javascript:;">
								<span>希腊</span>
								<i class="ico-hot"></i>
							</a>
							<a href="javascript:;">
								<span>新加坡</span>
								<i class="ico-hot"></i>
							</a>
							<a href="javascript:;">
								<span>新西兰</span>
								<i class="ico-hot"></i>
							</a>
							<a href="javascript:;"><span>匈牙利</span></a>
							<a href="javascript:;">
								<span>意大利</span>
								<i class="ico-hot"></i>
							</a>
							<a href="javascript:;"><span>伊朗</span></a>
							<a href="javascript:;"><span>印度</span></a>
							<a href="javascript:;"><span>印度尼西亚</span></a>
							<a href="javascript:;">
								<span>英国</span>
								<i class="ico-hot"></i>
							</a>
							<a href="javascript:;"><span>越南</span></a>
						</div>
					</div>
					<div class="mainright">
						<div class="items" data-more-url="/journals/domestic">
							<a
								href="/routes/show/32a95a9d82e"
								class="item journal"
								target="_blank"
							>
								<img
									class="journal-img"
									src="http://img.chufaba.me/routes/2015/06/18/22825deb9de76980.jpg!600x160"
									alt=""
									width="600"
								/>
								<div class="journal-wrap">
									<div class="txt-area">
										<h2 class="title">碉楼会说话</h2>
										<h3 class="sub-title">开平碉楼二日游</h3>
									</div>
								</div>
							</a>
							<a
								href="/routes/show/2078a9dc5f5"
								class="item journal"
								target="_blank"
							>
								<img
									class="journal-img"
									src="http://img.chufaba.me/routes/2014/07/21/6b9c40f7d0147f82.jpg!600x160"
									alt=""
									width="600"
								/>
								<div class="journal-wrap">
									<div class="txt-area">
										<h2 class="title">出发吧！环青海湖！</h2>
										<h3 class="sub-title">环湖 骑行 花海</h3>
									</div>
								</div>
							</a>
							<a
								href="/routes/show/1b60cfd99f5"
								class="item journal"
								target="_blank"
							>
								<img
									class="journal-img"
									src="http://img.chufaba.me/routes/2015/01/16/f8b4cd220c112f1f.jpg!600x160"
									alt=""
									width="600"
								/>
								<div class="journal-wrap">
									<div class="txt-area">
										<h2 class="title">巍巍山海关，赳赳北戴河</h2>
										<h3 class="sub-title">秦皇岛周末度假之旅</h3>
									</div>
								</div>
							</a>
							<a
								href="/routes/show/2d6c2ea4a76"
								class="item journal"
								target="_blank"
							>
								<img
									class="journal-img"
									src="http://img.chufaba.me/routes/2014/11/22/6f25137ba0e69e68.png!600x160"
									alt=""
									width="600"
								/>
								<div class="journal-wrap">
									<div class="txt-area">
										<h2 class="title">逛景只是为消食</h2>
										<h3 class="sub-title">两天带你“吃掉”成都</h3>
									</div>
								</div>
							</a>
							<a
								href="/routes/show/241bfc709f5"
								class="item journal"
								target="_blank"
							>
								<img
									class="journal-img"
									src="http://img.chufaba.me/routes/2014/08/19/40cd0f006f8c3850.png!600x160"
									alt=""
									width="600"
								/>
								<div class="journal-wrap">
									<div class="txt-area">
										<h2 class="title">私奔到天涯</h2>
										<h3 class="sub-title">三亚五日浪漫之旅</h3>
									</div>
								</div>
							</a>
							<a
								href="/routes/show/cc2f4a61057"
								class="item journal"
								target="_blank"
							>
								<img
									class="journal-img"
									src="http://img.chufaba.me/routes/2016/07/06/eaj8wch7tpn2o51e.jpg!600x160"
									alt=""
									width="600"
								/>
								<div class="journal-wrap">
									<div class="txt-area">
										<h2 class="title">四天品味苏州古韵</h2>
										<h3 class="sub-title">一河一巷道不尽烟雨江南</h3>
									</div>
								</div>
							</a>
						</div>
						<div class="page_body">
							<div class="pagenum_container">
								<el-pagination
									:page-size="1"
									:pager-count="8"
									layout="prev, pager, next"
									:total="100"
									background="none"
								>
								</el-pagination>
							</div>
						</div>
					</div>
					<!-- <p>
						--------------------------------------------------------------------------------------
					</p> -->
				</div>
			</div>
		</div>
		</div>
		</template>
		
		
		<!----------------最外层包裹DIV ----------------------->
	</div>
</template>

<script>
export default {
	name: "journey",
	data() {
		return {
			current: 1,
		};
	},
};
</script>

<style scoped>
.pagenum_container {
	text-align: center;
	margin: 20px auto;
}
.el-pagination.is-background .el-pager.active {
	background-color: #00c6cf;
	color: #fff;
}
.page_body {
	width: 100%;

	float: left;
}
.mainright {
	width: 600px;
	overflow: hidden;
	float: right;
}
.mainright .items a {
	position: relative;
	z-index: 4;
	display: block;
	width: 600px;
	height: 160px;
	margin-top: 10px;
	overflow: hidden;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
.items a img {
	position: relative;
	z-index: 1;
	height: 160px;
}
.items a .journal-wrap {
	font-family: "XinGothic", "WenQuanYi Micro Hei", "Hei SC", "Microsoft Yahei",
		sans-serif;
	-webkit-font-smoothing: antialiased;
	font-size: 14px;
	margin: 0;
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 4;
	width: 520px;
	padding: 20px 40px 20px;
	transition: background 0.3s linear;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.6) 0%,
		rgba(0, 0, 0, 0) 100%
	);
}
.items a .txt-area {
	float: left;
	width: 520px;
	line-height: 1;
	color: white;
	text-shadow: 0 1px 2px #000;
}
.items a .txt-area h2 {
	margin-bottom: 10px;
	overflow: hidden;
	font-size: 24px;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.items a .txt-area h3 {
	overflow: hidden;
	font-size: 16px;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.cont a {
	width: 98px;
	height: 30px;
	margin-top: 10px;
	margin-left: 10px;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 15px;
	font-size: 12px;
	line-height: 30px;
	text-align: center;
	text-decoration: none;
	color: #333;
}
.cont a span {
	width: 84px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.main {
	width: 960px;
	margin: 0 auto;
	font-size: 14px;
	overflow: hidden;
}
.mainLeft {
	z-index: 98;
	float: left;
	width: 330px;
	background: #f5f5f5;
}
.mainLeft .tabs {
	width: 100%;
	overflow: hidden;
}
.mainLeft .tabs a {
	float: left;
	width: 50%;
	height: 48px;
	font-size: 16px;
	line-height: 49px;
	text-align: center;
	text-decoration: none;
	color: #333;
	border-bottom: 1px solid #3c9;
}
.mainLeft .tabs .current {
	height: 45px;
	color: #3c9;
	border-bottom-width: 4px;
}
.journey_Content {
	width: 100%;
	background: #f5f5f5;
}
.Content {
	padding-bottom: 250px;
	padding-top: 80px;
}
.contentwrapper {
	height: 40px;
	font-size: 12px;
	line-height: 40px;
	color: #999;
	width: 960px;
	margin: 0 auto;
}
.contentwrapper a {
	text-decoration: none;
	color: #999;
}
.page-title {
	width: 960px;
	margin: 0 auto;
}
.page-title h2 {
	color: #000;
	font-family: "XinGothic", "WenQuanYi Micro Hei", "Hei SC", "Microsoft Yahei",
		sans-serif;
	-webkit-font-smoothing: antialiased;
	padding: 0;
	margin: 0;
	font-weight: normal;
}
</style>
